<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>江西农业大学图书馆 - 用户界面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'XingKai';
            src: url('https://cdn.jsdelivr.net/gh/googlefonts/noto-cjk@main/Sans/OTF/Chinese/NotoSansCJKsc-Bold.otf');
        }
        .system-title {
            font-family: 'XingKai', cursive;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="system-title">江西农业大学图书馆</h1>
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">图书借阅系统</a>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" onclick="showBooks()">图书列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" onclick="showMyBorrows()">我的借阅</a>
                        </li>
                    </ul>
                    <span class="navbar-text me-3" id="userInfo"></span>
                    <button class="btn btn-outline-danger" onclick="logout()">退出</button>
                </div>
            </div>
        </nav>

        <!-- 图书列表 -->
        <div id="bookList">
            <h3>可借阅图书</h3>
            <table class="table mt-3">
                <thead>
                    <tr>
                        <th>书名</th>
                        <th>作者</th>
                        <th>出版日期</th>
                        <th>ISBN</th>
                        <th>库存</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="availableBooks">
                </tbody>
            </table>
        </div>

        <!-- 我的借阅记录 -->
        <div id="myBorrows" style="display:none">
            <h3>我的借阅记录</h3>
            <table class="table mt-3">
                <thead>
                    <tr>
                        <th>书名</th>
                        <th>借阅日期</th>
                        <th>应还日期</th>
                        <th>实际归还日期</th>
                        <th>逾期费用</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="borrowList">
                </tbody>
            </table>
        </div>
    </div>

    <script>
        let currentUser;
        
        document.addEventListener('DOMContentLoaded', function() {
            currentUser = JSON.parse(localStorage.getItem('user'));
            
            if (!currentUser) {
                window.location.href = 'login.html';
                return;
            }
            
            if (currentUser.role === 1) {
                window.location.href = 'index.html';
                return;
            }
            
            document.getElementById('userInfo').textContent = `当前用户：${currentUser.username}`;
            loadBooks();
        });

        function loadBooks() {
            fetch('/api/books')
                .then(response => response.json())
                .then(books => {
                    const bookList = document.getElementById('availableBooks');
                    bookList.innerHTML = '';
                    books.filter(book => book.status === 1 && book.stock > 0)
                         .forEach(book => {
                        bookList.innerHTML += `
                            <tr>
                                <td>${book.name}</td>
                                <td>${book.author}</td>
                                <td>${formatDate(book.publishDate)}</td>
                                <td>${book.isbn}</td>
                                <td>${book.stock}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="borrowBook(${book.id})">借阅</button>
                                </td>
                            </tr>
                        `;
                    });
                });
        }

        function loadMyBorrows() {
            fetch(`/api/borrows/user/${currentUser.id}`)
                .then(response => response.json())
                .then(borrows => {
                    const borrowList = document.getElementById('borrowList');
                    borrowList.innerHTML = '';
                    borrows.forEach(borrow => {
                        borrowList.innerHTML += `
                            <tr>
                                <td>${borrow.bookName}</td>
                                <td>${formatDate(borrow.borrowDate)}</td>
                                <td>${formatDate(borrow.returnDate)}</td>
                                <td>${formatDate(borrow.actualReturnDate) || '-'}</td>
                                <td>${borrow.overdueFee ? '￥' + borrow.overdueFee : '-'}</td>
                                <td>${borrow.status === 0 ? 
                                    (new Date() > new Date(borrow.returnDate) ? '已逾期' : '借阅中') 
                                    : '已归还'}</td>
                                <td>
                                    ${borrow.status === 0 ? 
                                      `<button class="btn btn-sm btn-success" onclick="returnBook(${borrow.id})">归还</button>` 
                                      : ''}
                                </td>
                            </tr>
                        `;
                    });
                });
        }

        function borrowBook(bookId) {
            fetch('/api/borrows', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    bookId: bookId,
                    userId: currentUser.id
                })
            })
            .then(response => response.json())
            .then(result => {
                if (result) {
                    alert('借阅成功');
                    loadBooks();
                } else {
                    alert('借阅失败');
                }
            });
        }

        function returnBook(borrowId) {
            fetch(`/api/borrows/${borrowId}/return`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(result => {
                if (result) {
                    alert('归还成功');
                    loadMyBorrows();
                } else {
                    alert('归还失败');
                }
            });
        }

        function showBooks() {
            document.getElementById('bookList').style.display = 'block';
            document.getElementById('myBorrows').style.display = 'none';
            loadBooks();
        }

        function showMyBorrows() {
            document.getElementById('bookList').style.display = 'none';
            document.getElementById('myBorrows').style.display = 'block';
            loadMyBorrows();
        }

        function formatDate(date) {
            if (!date) return '';
            const d = new Date(date);
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        function logout() {
            fetch('/api/users/logout', {
                method: 'POST'
            })
            .then(() => {
                localStorage.removeItem('user');
                window.location.href = 'login.html';
            });
        }
    </script>
</body>
</html> 